<template>
    <div>
        <!-- 添加表单弹框 -->
        <a-modal :visible="formDrawer" @cancel="onCloseIconFn('addform')" title="添加监测站点" width="70%" centered destroyOnClose :maskClosable="false">
            <div class="ZYF-equipement">
                <a-form-model :model="form" ref="ruleForm" :rules="ruleForm" :label-col="{span: 4}" :wrapper-col="{span: 20}" :colon="false" :hideRequiredMark="true">
                    <a-row style="padding-bottom:30px">
                        <a-col :span="11">
                            <a-form-model-item label="站点名称" prop="monitorName">
                                <a-input v-model="form.monitorName" placeholder="请输入站点名称" allow-clear />
                            </a-form-model-item>
                            <a-form-model-item label="投入时间" required prop="createTime">
                                <a-date-picker v-model="form.createTime" show-time type="date" placeholder="请选择设备投入时间" style="width: 100%;" />
                            </a-form-model-item>
                            <a-form-model-item label="站点类型" v-if="applyType == 11">
                                <a-select v-model="form.monitorType" placeholder="请选择监测站点类型" allow-clear>
                                    <a-icon slot="suffixIcon" type="caret-down" />
                                    <a-select-option value="1">废气</a-select-option>
                                    <a-select-option value="2">废水</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item label="设备工况" prop="equipmentContent">
                                <a-input v-model="form.equipmentContent" type="textarea" placeholder="设备工况备注" style="height='200px'" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :offset="2" :span="11">
                            <a-form-model-item label="设备标识(MN)" prop="equipmentSequence">
                                <a-input v-model="form.equipmentSequence" placeholder="请输入设备序列号" allow-clear />
                            </a-form-model-item>
                            <a-form-model-item label="监测地区" prop="monitorAreaId">
                                <a-tree-select v-model="form.monitorAreaId" @change="Companychange" allowClear :tree-data="Company" :dropdownStyle="{maxHeight:'300px',overflow: 'auto'}" :replaceFields="{title:'name',key:'id',value:'id',children:'menuList'}" placeholder="请选择监测地区">
                                    <a-icon slot="suffixIcon" type="caret-down" />
                                </a-tree-select>
                            </a-form-model-item>
                            <a-form-model-item label="设备名称" prop="name">
                                <a-input v-model="form.name" placeholder="请输入设备名称" allow-clear />
                            </a-form-model-item>
                            <a-form-model-item label="异常报警值">
                                <a-input placeholder="请设置异常报警值" allow-clear @focus="addSubmitPopFn" />
                            </a-form-model-item>
                            <a-form-model-item label="申领备机">
                                <a-select v-model="form.detailId" placeholder="请选择申领备机" :default-active-first-option="false" :filter-option="false" :show-arrow="false" :not-found-content="null" showSearch @search="spareChange" allow-clear>
                                    <a-icon slot="suffixIcon" type="caret-down" />
                                    <a-select-option v-for="v in applyData" :key="v.detailId">{{v.spareName}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <!-- <a-form-model-item>
                                <a-upload :file-list="form.monitorImage" :remove="handleRemove" :before-upload="beforeUpload">
                                    <a-button>
                                        <a-icon type="upload" /> Select File
                                    </a-button>
                                </a-upload>
                                <a-button type="primary" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px" @click="handleUpload">
                                    {{ uploading ? 'Uploading' : 'Start Upload' }}
                                </a-button>
                            </a-form-model-item> -->
                        </a-col>
                    </a-row>
                    <div class="dotted-line">
                        <a-row>
                            <a-col :span="22">
                                <a-form-model-item label="选择时间" :label-col="{span: 2}">
                                    <a-checkbox-group v-model="form.cnList">
                                        <a-checkbox value="2011" name="实时数据">
                                            实时数据
                                        </a-checkbox>
                                        <a-checkbox value="2051" name="分钟数据">
                                            分钟数据
                                        </a-checkbox>
                                        <a-checkbox value="2061" name="小时数据">
                                            小时数据
                                        </a-checkbox>
                                        <a-checkbox value="2031" name="日数据">
                                            日数据
                                        </a-checkbox>
                                        <a-checkbox value="2071" name="动态管控数据" disabled>
                                            动态管控数据
                                        </a-checkbox>
                                    </a-checkbox-group>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="11">

                                <a-form-model-item label="设备经纬度" prop="x">
                                    <a-input v-model="form.x + ' ' + form.y" placeholder="点击设置经纬度" @focus="lonLatFn"></a-input>
                                </a-form-model-item>
                                <a-form-model-item label="摄像头地址" prop="videoAddress">
                                    <a-input v-model="form.videoAddress" placeholder="请输入摄像头地址"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :offset="2" :span="11">
                                <a-form-model-item label="所属企业名称" prop="companyId">
                                    <a-select v-model="form.companyId" placeholder="请选择所属企业名称" allow-clear>
                                        <a-icon slot="suffixIcon" type="caret-down" />
                                        <a-select-option :value="v.id" v-for="(v,i) in enterprise" :key="i">{{v.companyName}}</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                                <a-form-model-item label="设备高度">
                                    <a-input v-model="form.height" placeholder="请输入设备高度" allow-clear />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>
                </a-form-model>

            </div>
            <template slot="footer">
                <a-button type="primary" @click="submitData">确认入库</a-button>
            </template>
        </a-modal>
        <!-- 添加警告类型弹框 -->
        <a-modal :visible="Poptankuang1" @cancel="onCloseIconFn('addshebei')" width="70%" title="添加告警类型" centered :maskClosable="false" destroyOnClose>
            <div class="typeInput">
                <span class="lable-class">警告类型</span>
                <a-tree-select v-model="istrue" @change="changes" style="width:240px" :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" :tree-data="treeData" placeholder="请选择异常警告类型" treeNodeFilterProp="title" :replaceFields="{title: 'name',value: 'id',children: 'waringTypePoList',}" show-search allow-clear>
                    <a-icon slot="suffixIcon" type="caret-down" />
                </a-tree-select>
            </div>
            <div class="tancuangbox">
                <div class="tanchuang-left">
                    <div class="left-table">
                        <a-table :row-selection="{type:'radio',selectedRowKeys:selectedRowKeys,onChange:onChange1}" :columns="columns1" :data-source="tabledata" :pagination="false" :rowKey="record=> record.maxValue" :hideDefaultSelections="true" :scroll="{ y:300}" size="middle"></a-table>
                    </div>
                    <div class="left-button">
                        <a-button type="primary" style="color:#9fb043" @click="addNumberPop">新增</a-button>
                        <a-button type="primary" @click="addTabaleData">确定</a-button>
                    </div>
                </div>
                <div class="tanchuang-right">
                    <a-table :data-source="warningtableData" :pagination="false" :rowKey="record=> record.waringTypeName" :scroll="{ y:400}" size="middle">
                        <a-table-column title="警告类型" data-index="waringTypeName" align="center" :ellipsis="true" />
                        <a-table-column title="警告级别" data-index="warningType" align="center" :ellipsis="true" />
                        <a-table-column title="最大值" data-index="maxValue" align="center" :ellipsis="true" />
                        <a-table-column title="最小值" data-index="minValue" align="center" :ellipsis="true" />
                        <a-table-column title="操作" align="center" width="200px">
                            <template slot-scope="text,record,index">
                                <a-button type="danger" @click="deltable(record,index)">删除</a-button>
                            </template>
                        </a-table-column>
                    </a-table>
                </div>
            </div>
            <template slot="footer">
                <a-button type="primary" @click="warningData">确定</a-button>
            </template>
        </a-modal>
        <!-- 添加弹框警告值 -->
        <a-modal :visible="Poptankuang2" @cancel="onCloseIconFn('addnum')" width="50%" title="添加异常值" centered :maskClosable="false" destroyOnClose>
            <a-form-model :model="from1" :label-col="{span:4}" :wrapper-col="{span:18}" :colon="false" :rules="rulesNum" ref="rulesfrom1" hideRequiredMark>
                <a-form-model-item label="警告级别">
                    <a-select v-model="from1.warningType" placeholder="请选择警告级别">
                        <a-select-option value="一级警告">一级警告</a-select-option>
                        <a-select-option value="二级警告">二级警告</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="最大值" prop="maxValue">
                    <a-input v-model="from1.maxValue" />
                </a-form-model-item>
                <a-form-model-item label="最小值" prop="minValue">
                    <a-input v-model="from1.minValue" />
                </a-form-model-item>
                <a-form-model-item label="是否默认选择数据">
                    <a-switch v-model="from1.isDefault" />
                </a-form-model-item>
                <a-form-model-item label="备注">
                    <a-input v-model="from1.note" type="textarea" />
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="addfrom1NumFn">确定</a-button>
            </template>
        </a-modal>
        <!-- 经纬度弹窗 -->
        <a-modal :visible="Poptankuang3" @cancel="onCloseIconFn('lnglat')" width="70%" title="经纬度" centered :maskClosable="false" destroyOnClose>
            <div style="height:500px">
                <a-form-model layout="inline" :model="form" :colon="false">
                    <a-form-model-item label="经度">
                        <a-input v-model="form.x" placeholder="请输入经度" allow-clear />
                    </a-form-model-item>
                    <a-form-model-item label="纬度">
                        <a-input v-model="form.y" placeholder="请输入纬度" allow-clear />
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button type="reset" @click="dowrGraphics">
                            <img src="@/assets/public/地图绘制1.png" />
                        </a-button>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button type="reset" @click="cloDowrFn">
                            <img src="@/assets/public/地图绘制4.png" />
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
                <div class="mapbox">
                    <el-amap class="amapContainer" :amap-manager="amapManager" :events="events" :center="center" :zoom="zoom" :vid="'amap-vue'"></el-amap>
                </div>
            </div>
            <template slot="footer">
                <a-button type="primary" @click="colLonLat">确定</a-button>
            </template>
        </a-modal>
    </div>

</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
import util from "@/libs/util.js";
import { log } from "video.js";
export default {
    props: {
        applyType: [String,Number],
    },
    data() {
        let thet = this;
        return {
            formDrawer: false,
            Company: [], // 地区下拉数据
            applyData: [], // 申领设备下拉
            enterprise: [], // 公司下拉
            fileList: [],
            uploading: false,
            // 添加设备字段
            form: {
                name: "", // 设备名称
                equipmentSequence: "", // 序列号
                createTime: undefined, //  投入时间
                geom: "", // 设备坐标
                equipmentContent: "", // 设备工况
                monitorAreaId: undefined, // 检测地区
                detailId: "",
                // monitorDevelopmentId: undefined, // 检测开发区id
                monitorFactoryId: undefined, // 检测厂家id
                companyId: undefined, // 企业名称
                monitorName: "", // 检测站点名称
                videoAddress: "", // 摄像头地址
                monitorType: undefined, // 检测站点类型
                monitorImage: "", // 检测站点图片
                // note: "", // 备注
                equipmentTypeId: "", // 设备类型id
                cnList: [], // 时间选择
                // createFactory: "", // 生产厂家
                waringIds: [], //异常报警id数据long[]
                // regionId: "", //区划idlong
                // roadId: "", //道路idlong
                x: "", //x坐标string
                y: "", //y坐标
                height: "", //设备所在高度
                equipmentAbnormalInfoList: [], // 异常报警值
            },
            from1: {
                maxValue: "", //最大值
                minValue: "", //最小值
                note: "",
                isDefault: true,
            },
            // 添加设备表单验证
            ruleForm: {
                name: [
                    {
                        required: true,
                        message: "设备名称必填",
                        trigger: "blur",
                    },
                ],
                monitorName: [
                    {
                        required: true,
                        message: "站点名称必填",
                        trigger: "blur",
                    },
                ],
                createTime: [
                    {
                        required: true,
                        message: "创建时间必填",
                        trigger: "change",
                    },
                ],
                // equipmentContent: [
                //     {
                //         required: true,
                //         message: "设备工况必选",
                //         trigger: "blur",
                //     },
                // ],
                equipmentSequence: [
                    {
                        required: true,
                        message: "设备序列号必填",
                        trigger: "blur",
                    },
                ],
                x: [
                    {
                        required: true,
                        message: "坐标必填",
                        trigger: "change",
                    },
                ],
                monitorAreaId: [
                    {
                        required: true,
                        message: "监测地区必选",
                        trigger: "change",
                    },
                ],
                companyId: [
                    {
                        required: true,
                        message: "企业名称必选",
                        trigger: "change",
                    },
                ],
            },
            Poptankuang1: false, // 异常警报类型添加
            Poptankuang2: false, // 异常警报值添加弹框
            Poptankuang3: false, // 经纬度弹框
            treeData: [], // 警告类型下拉框数据
            warningtableData: [], // 警告数据表格
            selectedRowKeys: [], // 警告值选择框数据
            istrue: "",
            // 警告值表格
            columns1: [
                {
                    title: "最大值",
                    dataIndex: "maxValue",
                    align: "center",
                },
                {
                    title: "最小值",
                    dataIndex: "minValue",
                    align: "center",
                },
            ],
            rulesNum: {
                maxValue: [
                    {
                        required: true,
                        message: "请输入最大值",
                        trigger: "blue",
                    },
                    { validator: this.validatenumber, trigger: "blue" },
                ],
                minValue: [
                    {
                        required: true,
                        message: "请输入最小值",
                        trigger: "blue",
                    },
                    { validator: this.validatenumber, trigger: "blue" },
                ],
            },
            tabledata: [], // 警告值表格数据
            // 地图
            amapManager,
            mapStyle: "amap://styles/39ba2088b6b8fc67184833f73cceab4d",
            zoom: 10,
            map: "",
            center: [118.4643, 32.0238],
            events: {
                init(o) {
                    lazyAMapApiLoaderInstance.load().then(() => {
                        thet.initPage();
                    });
                },
            },
            district: "", // 获取行政区划坐标
            mouseTool: "", // 鼠标点击实例
            marker: "", // 用户创建的点标记
            warninglist: {},
            districtData: [], // 后台返回的行政区划数组
            polygons: [],
        };
    },

    methods: {
        warningData() {
            this.Poptankuang1 = false;
            this.warningtableData.forEach((v) => {
                if (v.id) {
                    this.form.waringIds.push(v.id);
                } else {
                    this.form.equipmentAbnormalInfoList.push(v);
                }
            });
        },
        handleRemove(file) {
            console.log(file);
            const index = this.form.monitorImage.indexOf(file);
            const newFileList = this.form.monitorImage.slice();
            newFileList.splice(index, 1);
            this.form.monitorImage = newFileList;
        },
        beforeUpload(file) {
            console.log(file);
            this.form.monitorImage = [...this.form.monitorImage, file];
            return false;
        },
        handleUpload() {
            const { fileList } = this;
            const formData = new FormData();
            fileList.forEach((file) => {
                formData.append("files[]", file);
            });
            this.uploading = true;
        },
        // 验证是否是数字类型
        validatenumber(rule, value, callback) {
            if (!/^[0-9]*$/.test(value)) {
                callback("请输入数字类型");
            } else {
                callback();
            }
        },
        // 添加警报值按钮
        addSubmitPopFn(e) {
            e.target.blur();
            this.Poptankuang1 = true;
            this.form.waringIds = [];
            this.form.equipmentAbnormalInfoList = [];
            this.getTreeData();
        },
        // 经纬度弹窗
        lonLatFn(e) {
            e.target.blur();
            if (!this.form.monitorAreaId) {
                this.$message.info("请先选择监测地区");
                return;
            }
            if (this.districtData.length <= 0) {
                this.$message.info(
                    "选择的监测地区暂时还设置行政区域，请先设置！"
                );
                return;
            }
            this.Poptankuang3 = true;
            if (this.form.x != "" && this.form.y != "") {
                setTimeout(() => {
                    this.marker = new AMap.Marker({
                        position: new AMap.LngLat(this.form.x, this.form.y),
                    });
                    this.map.add(this.marker);
                    this.map.setCenter([this.form.x, this.form.y]);
                }, 1000);
            }
        },
        // 确定点标记
        colLonLat() {
            var is = this.polygons.some((v) => {
                return v.some((i) =>
                    AMap.GeometryUtil.isPointInRing(
                        this.marker.getPosition(),
                        i
                    )
                );
            });
            if (!is) {
                this.$message.info("请输入区域以内的坐标！");
                return;
            }
            this.Poptankuang3 = false;
        },
        //提交表单给后台按钮
        submitData() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    if (this.warningtableData.length <= 0) {
                        this.$message.warning("请设置报警信息");
                        return;
                    }
                    var data = JSON.parse(JSON.stringify(this.form));
                    var arr = [];
                    data.cnList.forEach((v) => {
                        let obj = {};
                        switch (v) {
                            case "2011":
                                console.log(v);
                                obj = {
                                    name: "实时数据",
                                    cn: "2011",
                                };
                                break;
                            case "2051":
                                obj = {
                                    name: "分钟数据",
                                    cn: "2051",
                                };
                                break;
                            case "2061":
                                obj = {
                                    name: "小时数据",
                                    cn: "2061",
                                };
                                break;
                            case "2031":
                                obj = {
                                    name: "日数据",
                                    cn: "2031",
                                };
                                break;
                            case "2071":
                                obj = {
                                    name: "动态管控数据",
                                    cn: "2071",
                                };
                                break;
                        }
                        arr.push(obj);
                    });
                    data.cnList = arr;
                    data.createTime = new Date(data.createTime).getTime();
                    if (data.x && data.y) {
                        data.geom = `POINT(${data.x} ${data.y})`;
                    }
                    this.$api.postEquipment(data).then((res) => {
                        if (res.data.code == 0) {
                            this.formDrawer = false;
                            this.$message.info("添加成功!");
                            this.form = {
                                name: "", // 设备名称
                                equipmentSequence: "", // 序列号
                                createTime: undefined, //  投入时间
                                geom: "", // 设备坐标
                                equipmentContent: "", // 设备工况
                                monitorAreaId: undefined, // 检测地区
                                detailId: "",
                                // monitorDevelopmentId: undefined, // 检测开发区id
                                monitorFactoryId: undefined, // 检测厂家id
                                companyId: undefined, // 企业名称
                                monitorName: "", // 检测站点名称
                                videoAddress: "", // 摄像头地址
                                monitorType: undefined, // 检测站点类型
                                monitorImage: "", // 检测站点图片
                                // note: "", // 备注
                                equipmentTypeId: "", // 设备类型id
                                cnList: [], // 时间选择
                                // createFactory: "", // 生产厂家
                                waringIds: [], //异常报警id数据long[]
                                // regionId: "", //区划idlong
                                // roadId: "", //道路idlong
                                x: "", //x坐标string
                                y: "", //y坐标
                                height: "", //设备所在高度
                                equipmentAbnormalInfoList: [], // 异常报警值
                            };
                            this.warningtableData = [];
                            this.istrue = "";
                            this.tabledata = [];
                            this.$parent.getdata();
                        } else {
                            this.$message.warning(res.data.errorMessage);
                        }
                    });
                }
            });
        },
        // 获取警告类型树形图
        getTreeData() {
            // 弹框树形数据
            this.$api.GetfindByTree().then((res) => {
                if (res.data.code == 0) {
                    this.treeData = util.recursion(res.data.data);
                }
            });
        },
        // 类型选择下拉框
        changes(value, label, extra) {
            this.selectedRowKeys = [];
            this.from1.waringTypeId = value;
            this.from1.waringTypeName = label[0];
            this.$api.PostabnormalfindByWaringType(value).then((res) => {
                console.log(res.data);
                if (res.data.code == 0) {
                    if (res.data.data.length <= 0) {
                        this.$message.info("此警告类型暂时没有默认警告值");
                    }
                    this.tabledata = res.data.data;
                    this.tabledata.forEach((v) => {
                        v.waringTypeName = label[0];
                    });
                } else {
                    this.$message.warning(res.data.errorMessage);
                }
            });
        },
        // 点击表格选择框拿到数据
        onChange1(index, data) {
            console.log(...arguments);
            this.selectedRowKeys = index;
            this.warninglist = data[0];
        },
        // 新增警告值按钮方法
        addNumberPop() {
            console.log(this.istrue);
            if (this.istrue) {
                this.Poptankuang2 = true;
            } else {
                this.$message.warning("请先选择警告类型");
            }
        },
        // 点击确定按钮往右侧表格添加数据
        addTabaleData() {
            if (this.warninglist.length == 0) {
                this.$message.warning("请先选择警告值");
            } else {
                var isData = this.warningtableData.some((v) => {
                    return v.waringTypeId == this.warninglist.waringTypeId;
                });
                if (isData) {
                    this.$message.warning("类型警告值已选择");
                } else {
                    this.warningtableData.push(this.warninglist);
                }
            }
        },
        //异常值弹框新增确定按钮
        addfrom1NumFn() {
            this.$refs.rulesfrom1.validate((vali) => {
                if (vali) {
                    this.tabledata.push(this.from1);
                    this.from1 = {};
                    this.Poptankuang2 = false;
                }
            });
        },
        // 右侧表格删除按钮方法
        deltable(record, index) {
            this.warningtableData.splice(index, 1);
        },
        // 点击右上角关闭按钮方法
        onCloseIconFn(done) {
            var self = this;
            this.$confirm({
                title: "关闭将不会保留数据，是否确认关闭弹窗？",
                centered: true,
                onOk() {
                    if (done == "addform") {
                        self.formDrawer = false;
                        self.form = {
                            name: "", // 设备名称
                            equipmentSequence: "", // 序列号
                            createTime: undefined, //  投入时间
                            geom: "", // 设备坐标
                            equipmentContent: "", // 设备工况
                            monitorAreaId: undefined, // 检测地区
                            detailId: "",
                            // monitorDevelopmentId: undefined, // 检测开发区id
                            monitorFactoryId: undefined, // 检测厂家id
                            companyId: undefined, // 企业名称
                            monitorName: "", // 检测站点名称
                            videoAddress: "", // 摄像头地址
                            monitorType: undefined, // 检测站点类型
                            monitorImage: "", // 检测站点图片
                            // note: "", // 备注
                            equipmentTypeId: "", // 设备类型id
                            cnList: [], // 时间选择
                            // createFactory: "", // 生产厂家
                            waringIds: [], //异常报警id数据long[]
                            // regionId: "", //区划idlong
                            // roadId: "", //道路idlong
                            x: "", //x坐标string
                            y: "", //y坐标
                            height: "", //设备所在高度
                            equipmentAbnormalInfoList: [], // 异常报警值
                        };
                        self.warningtableData = [];
                        self.istrue = "";
                        self.tabledata = [];
                        self.from1 = {};
                    } else if (done == "addshebei") {
                        self.Poptankuang1 = false;
                        self.istrue = "";
                        self.warningtableData = [];
                        self.tabledata = [];
                        self.from1 = {};
                    } else if (done == "lnglat") {
                        self.form.x = "";
                        self.form.y = "";
                        self.marker = null;
                        self.Poptankuang3 = false;
                    } else {
                        self.Poptankuang2 = false;
                        self.from1 = {};
                    }
                },
                onCancel() {
                    return;
                },
            });
        },
        // 初始化地图
        initPage() {
            this.map = this.amapManager.getMap();
            this.map.plugin(["AMap.MouseTool", "AMap.DistrictSearch"], () => {
                var opts = {
                    subdistrict: 0, //返回下一级行政区
                    showbiz: false, //最后一级返回街道信息
                    extensions: "all", // 返回行政区边界坐标等具体信息
                };
                this.mouseTool = new AMap.MouseTool(this.map);
                this.district = new AMap.DistrictSearch(opts);
                this.polygons = [];
                this.districtData.forEach((v) => {
                    this.district.search(v.areaCode, (status, result) => {
                        var bounds = result.districtList[0].boundaries;
                        this.polygons.push(bounds);
                        for (var i = 0, l = bounds.length; i < l; i++) {
                            var polygon = new AMap.Polygon({
                                map: this.map,
                                strokeWeight: 1,
                                strokeColor: "rgba(128,216,255,0.73)",
                                fillColor: "rgba(0,176,255,0.75)",
                                // fillOpacity: 0.2,
                                path: bounds[i],
                            });
                        }
                        this.map.setFitView(); //地图自适应
                    });
                });
            });
            this.mouseTool.on("draw", (e) => {
                var is = this.polygons.some((v) => {
                    return v.some((i) =>
                        AMap.GeometryUtil.isPointInRing(e.obj.getPosition(), i)
                    );
                });
                if (is) {
                    if (this.marker) {
                        this.map.remove(this.marker);
                        this.marker = null;
                    }
                    this.form.x = e.obj.getPosition().lng;
                    this.form.y = e.obj.getPosition().lat;
                    this.marker = e.obj;
                } else {
                    this.map.remove(e.obj);
                    this.$message.info("只能在区域范围内设置设备经纬度！");
                    return;
                }
            });
        },
        // 点击点标记按钮
        dowrGraphics() {
            this.mouseTool.marker();
        },
        // 删除点标记按钮
        cloDowrFn() {
            this.map.remove(this.marker);
            this.marker = "";
            this.form.x = "";
            this.form.y = "";
        },
        // 地图方法完
        // 企业数据
        Companychange(value, label, extra) {
            this.$api.CompanyFindCompanyByPointId(value).then((res) => {
                if (res.data.code == 0) {
                    this.enterprise = res.data.data;
                }
            });
            this.$api.findAreaGeomByAreaId(value).then((res) => {
                console.log(res.data);
                if (res.data.code == 0) {
                    this.districtData = res.data.data;
                }
            });
        },
        // 获取下拉框数据方法
        getSelectData() {
            this.$api.AreaFindAreasByUserId(this.$user.id).then((res) => {
                if (res.data.code == 0) {
                    this.Company = this.CompanyData(res.data.data);
                } else {
                    this.$message.warning(res.data.errorMessage);
                }
            });
        },
        // 申领备机
        spareChange(value) {
            this.getSpareData(value);
        },
        getSpareData(searchKey) {
            this.$api
                .SpareFindApplyStandby({
                    id: this.form.detailId,
                    type: this.applyType,
                    searchKey: searchKey,
                })
                .then((res) => {
                    console.log(res.data.data);
                    if (res.data.code == 0) {
                        this.applyData = res.data.data;
                    } else {
                        this.$message.warning(res.data.errorMessage);
                    }
                });
        },
        // 企业数据处理
        CompanyData(data) {
            for (let v = 0; v < data.length; v++) {
                if (data[v].menuList && data[v].menuList.length > 0) {
                    data[v].selectable = false;
                    this.CompanyData(data[v].menuList);
                }
            }
            return data;
        },
    },
    mounted() {
        this.getSelectData();
        this.form.userId = this.$user.id;
    },
    watch: {
        form: {
            deep: true,
            handler(newValue, oldValue) {
                if (newValue.x != "" && newValue.y != "") {
                    if (this.marker) {
                        this.marker.setPosition([this.form.x, this.form.y]);
                    } else {
                        this.marker = new AMap.Marker({
                            position: new AMap.LngLat(this.form.x, this.form.y),
                        });

                        this.map.add(this.marker);
                    }
                    this.map.setCenter([this.form.x, this.form.y]);
                } else {
                    if (this.marker) {
                        this.marker.setMap(null);
                        this.marker = null;
                    }
                }
            },
        },
    },
};
</script>

<style lang="scss" scoped>
// 添加设备样式
.ZYF-equipement {
    width: 100%;
    height: 100%;
    .air-equipement__title {
        line-height: 50px;
        margin-bottom: 30px;
    }

    .equipement-margin {
        margin: 10px 0 30px;
    }
    .dotted-line {
        width: 100%;
        padding-top: 24px;
        border-top: 1px dashed #207064;
        border-bottom: 1px dashed #207064;
    }
    .del-btnclass {
        color: rgba(255, 255, 255, 0.5);
        background-color: #2b4341;
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
}
// 弹窗样式
::v-deep .ant-modal-body {
    padding: 0 24px;
    .typeInput {
        width: 100%;
        height: 7%;
        margin-bottom: 20px;
        .lable-class {
            font-size: 16px;
            color: #9fb043;
            display: inline-block;
            width: 80px;
        }
        ::v-deep .ant-select {
            width: calc(100% - 80px);
        }
    }
    .tancuangbox {
        height: 500px;
        display: flex;

        .tanchuang-left {
            width: 30%;
            padding-right: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .left-table {
                height: 80%;
            }
            .left-button {
                height: 8%;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
            }
        }
        .tanchuang-right {
            width: 70%;
            .tanchuang-table {
                height: 70%;
            }
        }
    }
}

::v-deep form textarea.ant-input {
    height: 100px;
}
// 表格样式
::v-deep .ant-table table {
    height: auto;
    border-radius: 0;
    border-left: 1px solid #207064;
    border-right: 1px solid #207064;
}

::v-deep .ant-table-thead > tr > th {
    line-height: 22px;
    border-bottom: 0;
    border-radius: 0;
}

::v-deep .ant-table-tbody > tr > td {
    border-bottom: 1px solid #2c6a60;
}
// 地图
.mapbox {
    width: 100%;
    height: 90%;
}
</style>
<style>
/* 下拉选择框样式 */
.ant-select-tree-dropdown .ant-select-dropdown-search {
    background: transparent;
}

.ant-select-tree-dropdown
    .ant-select-dropdown-search
    .ant-select-search__field {
    border: 1px solid #2c4945;
    color: #37ddc0;
    background-color: #2c4945;
}
</style>